<template>
  <div class="content">
    <p>加入市场，只能选择自己店铺已上架的商品</p>
    <div class="one">
      <div
        v-for="(item,index) in swiperList"
        :key="index"
        @click="linkClick(item)"
      >
        <div class="cont">
          <span>{{item.goodsTypeName}}</span>
          <div>
            <p>{{item.length}}件商品</p>
            <i-icon type="enter" size="18" color="#999" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { FIND_SHOP_GOODS_PAGE, FIND_GOODS_TYPE_LIST_API } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      swiperList: []
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.swiperList = []
    this.$cookie.remove('choose-goods-type')
    this.findGoodsTypeListApi()
  },
  methods: {
    linkClick (item) {
      this.$cookie.set('choose-goods-type', item.goodsTypeId)
      this.$router.push(
        `/pages/data-analyze/stock/supply/order/list/main?type=type&goodsTypeName=${
          item.goodsTypeName
        }`
      )
    },
    findGoodsTypeListApi () {
      const vm = this
      FIND_GOODS_TYPE_LIST_API(vm.account.shopId, 0)
        .then(r => {
          if (r.data.code === '0') {
            r.data.data.forEach(_ => {
              _.length = 0
              vm.getShopNum(_)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getShopNum (item) {
      const vm = this
      let params = {
        providerId: vm.$store.state.account.providerId,
        state: 1,
        isShelf: '1',
        shopId: vm.account.shopId,
        // goodsPlatformTypeId: item.goodsPlatformTypeId
        goodsTypeId: item.goodsTypeId
      }
      FIND_SHOP_GOODS_PAGE(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            item.length = r.data.data.total
            vm.swiperList.push(item)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  background: #f6f8f9;
  > p {
    font-size: 13px;
    line-height: 44px;
    width: 90%;
    margin: auto;
    color: #f24d38;
  }
  > .one,
  .two {
    > div {
      width: 90%;
      margin: auto;
      padding: 15px 0;
      font-size: 15px;
      background: #fff;
      border-radius: 6px;
      margin-bottom: 10px;
      > .cont {
        width: 90%;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          color: #000;
        }
        div {
          display: flex;
          align-items: center;
          p {
            color: #999;
          }
        }
      }
    }
  }
}
</style>
